דלג לתוכן הראשי

Routing

ה-routing מאפשר לנו ניווט באפליקציה. באופן בסיסי יש 3 שלבים ליצירת routing.

  1. ליצור מערך של routes.
  2. לייבא את ספריית routes.
  3. לייבא את RouterModule.
app.module.ts
import { RouterModule, Routes } from '@angular/router';
const appRoute: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'courses', component: CoursesComponent },
{ path: '**', component: ErrorPageComponent },

];

@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
ContactComponent,
CoursesComponent,
ErrorPageComponent,

],
providers: [UserService],
bootstrap: [AppComponent],
imports: [BrowserModule, RouterModule.forRoot(appRoute)],
})

אחרי שייצרנו את ה-routes צריך לשים אותם בקובץ ה-html.

במבנה של העמוד הזה יש לנו את החלק העליון שהוא ניווט לעמודים המתאימים ואז את router-outlet שמכיל את התוכן של הקומפוננטה שאליה אנחנו מנווטים.

app.component.html
<div class="container">
<header class="d-flex justify-content-center py-3">
<ul class="nav nav-pills">
<li class="nav-item">
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a routerLink="about" routerLinkActive="active" class="nav-link"
>About</a
>
</li>
<li class="nav-item">
<a routerLink="contact" routerLinkActive="active" class="nav-link"
>Contact</a
>
</li>
<li class="nav-item">
<a routerLink="courses" routerLinkActive="active" class="nav-link"
>Courses</a
>
</li>
</ul>
</header>

<div class="container">
<router-outlet></router-outlet>
</div>
</div>

כדי לסמן את הכתובת של הקישור משתמשים ב-routerLink במקום ב-href.

כדי להציג את הקישור הפעיל משתמשים ב-routerLinkActive.

כדי שהקישור הראשי לא יהיה פעיל כשגם הקישורים האחרים עובדים, נשים בו [routerLinkActiveOptions]="{exact: true}".

מסלול מוחלט ויחסי

אם אנחנו משתמשים ב-/ כשאנחנו כותבים את מסלול הקישור, המסלול יהיה מוחלט לנתיב האתר ויעבוד ביחס לנתיב הראשי שלנו.

אם לא משתמשים ב-/, המסלול יהיה יחסי ויתייחס לנתיב הפעיל כרגע.

ניווט על ידי קוד

אפשר לנווט על ידי קישורים או להפעיל את הניווט מתוך ה-class/

comp.html
<a (click)="navigateToHome()" class="mb-4">Go to homepage</a>
<button (click)="navigateToHome()" class="mb-4">Go to homepage</button>

פונקציית הניווט navigate מקבלת מערך עם השם של ה-route. הפונקציה navigateByUrl מקבלת את הנתיב כמחרוזת.

comp.ts
constructor(private route: Router){}

navigateToHome(){
this.route.navigate(['Home']);
this.route.navigateByUrl('Home');
}

כדי להשתמש בנתיב יחסי, אנחנו צריכים להשתמש בנתיב בו אנחנו נמצאים עכשיו.

comp.ts
constructor(private route: Router, private activatedRoute: ActivatedRoute) {}

navigateToHome() {
this.route.navigate(['Home'], {relativeTo: this.activatedRoute});
}